
<template>
    <div class="index">
        <!-- 图片管理 -->
        <div style="padding-bottom:24px">
            <el-button type="primary" @click="addBtn">新增</el-button>
        </div>
        <div>
            <el-table
                :data="tableData"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0.1)"
            >
                <el-table-column
                    type="index"
                    align="center"
                    label="序号"
                ></el-table-column>
                <el-table-column
                    prop="name"
                    label="缩略图"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.url"
                            :preview-src-list="srcList">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="educationTypeStr"
                    label="名称"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="provinceStr"
                    label="时间"
                    align="center"
                ></el-table-column>
                <el-table-column prop="cityStr" label="描述" >
                </el-table-column>

                <el-table-column label="操作" min-width="80" align="left">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="lookBtn(scope.row.id)" style="margin-right:10px">查看</el-link>
                        <el-link type="primary" @click="delBtn(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-number">
                <el-pagination
                    @limit-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="form.limit"
                    :current-page="form.page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
        <Add
            :showDialog="showDialog"
            :look="look"
            :editData="detailInfo"
            @close="closeDialog"
        ></Add>
    </div>
</template>

<script>
import Add from './add.vue';

export default {
    components: {
        Add,
    },
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    name: '123',
                },
            ],
            total: 0,
            loading: false,
            showDialog: false,
            form: {
                page: 1,
                limit: 10,
                name: '',
            },
            count: {
                totalPersonNum: 0,
                totalAmount: 0,
            },
            showDialog: false,
            look: false,
        };
    },
    computed: {},
    watch: {},
    created() {
        this.getList();
    },
    mounted() {
        //  this.$api.testGet1().then(res => {
        //     console.log(res)
        // })
    },
    destroyed() {},
    methods: {
        getList() {},
        handleSizeChange(val) {
            this.form.page = 1;
            this.form.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.form.page = val;
            this.getList();
        },
        addBtn() {
            this.showDialog = true;
        },
        lookBtn() {
            this.showDialog = true;
            this.look = true;
        },
        delBtn() {
            this.$confirm('此操作将该条记录删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {})
                .catch(() => {});
        },
        closeDialog() {
            this.showDialog = false;
            this.look = false;
        },
    },
};
</script>
  <style lang='scss' scoped>
// import
</style>
